<template>
	<view class="main">
		<view class="content" v-for="(item, index) in list" :key="index">
			<view class="bg-videos">
				<view class="">
					<text class="title">{{ item.name }}</text>
				</view>
				<view class="" @click="go(item, index)"><image :src="item.src" class="video" mode=""></image></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					name: '邢台支队基层党务工作常见问题300问',
					src: 'http://oss.91xiaokong.com/fireControl/tucezhidu/1.png'
				},
				{
					name: '邢台支队基层党组织标准化规范化建设文书及流程图手册', //
					src: 'http://oss.91xiaokong.com/fireControl/tucezhidu/2.png'
				},
				{
					name: '邢台支队基层组织标准化规范化建设手册',
					src: 'http://oss.91xiaokong.com/fireControl/tucezhidu/3.png'
				},
				{
					name: '邢台支队正规化建设图册',
					src: 'http://oss.91xiaokong.com/fireControl/tucezhidu/4.png'
				},
				{
					name: '邢台支队正规化资料汇编',
					src: 'http://oss.91xiaokong.com/fireControl/tucezhidu/5.png'
				}
			]
		};
	},
	onShow() {
		uni.showLoading({})
		setTimeout(function() {
			uni.hideLoading()
		}, 500)
		
	},
	methods: {
		go(item, index) {
			uni.navigateTo({
				url: 'tuce?index=' + (index + 1)
			});
			
		}
	}
};
</script>

<style>
.title {
	font-size: 25rpx;
	font-weight: 400;
	color: #00ffff;
	line-height: 50rpx;
}

.video {
	height: 366rpx;
	width: 616rpx;
}

.bg-videos {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background-image: url('http://oss.91xiaokong.com/fireControl/video/2.png');
	background-size: 100% 100%;
	height: 485rpx;
	width: 702rpx;
	z-index: 1;
}

.content {
	padding-top: 10%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: -1;
}

page {
}

.main {
	background-image: url('http://oss.91xiaokong.com/fireControl/video/1.png');
	background-size: 100% 100%;
	background-repeat: repeat;
	height: 100%;
}
</style>
